<!-- @format -->

<template>
    <div class="container">
        <h1 class="title">welcome</h1>
        <section>
            <p><i class="iconfont icon-ku" style="color: yellow"></i>{{ loveWords[0] }}</p>
        </section>
        <el-button type="primary" @click="getWord">Primary</el-button>
        <HomePanel title="Nothing" subTitle="..." />
    </div>
</template>

<script setup lang="ts">
import HomePanel from './components/HomePanel.vue';

import {getRandLoveWord} from '@/apis/test';
let loveWords = ref<string[]>([]);

onMounted(() => {
    // getWord();
});

const getWord = async () => {
    const res = await getRandLoveWord();
    loveWords.value.push(res.content as string);

    console.log(res);
};
</script>

<style scoped lang="scss">
.container {
    width: 100%;
    height: 100%;
}

.logo {
    height: 6em;
    padding: 1.5em;
    will-change: filter;
    transition: filter 300ms;
}
.logo:hover {
    filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
    filter: drop-shadow(0 0 2em #42b883aa);
}
.title {
    color: $textColor;
}
</style>
